<template>
  <el-row>
    <div class="chart-title">
      <div class="chart-title-left">
        <div class="title-text">{{chartName}}</div>
        <i class="el-icon-refresh chart-refresh" />
      </div>
      <div class="chart-title-right" >
        <el-button size="small" type="text" @click="showSetting = !showSetting" >设置<i :class="showSetting?'el-icon-caret-top' : 'el-icon-caret-bottom'"></i></el-button>
      </div>
    </div>
    <div class="setting" v-if="showSetting">
      <el-row :gutter="15">
        <el-col :xs="24" :sm="12" :lg="12">
          数据类型：<el-select v-model="value" @change="changeChatData" size="mini">
         <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12">
            时间范围：<el-select v-model="value" @change="changeChatData" size="mini">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
        </el-col>
      </el-row>
       
    </div>
    <line-chart v-if="chart == 'line'" :action="action" :height="height" />
    <pie-chart v-if="chart == 'pie'" :action="action" :height="height" :chartName="chartName" />
    <bar-chart v-if="chart == 'bar'" :action="action" :height="height"  />
    <raddar-chart v-if="chart == 'raddar'" :action="action" :height="height"  />
    <scroll-table v-if="chart == 'scroll'" :action="action" :scrollAction="scrollAction" :column="column" />
  </el-row>
</template>

<script>
import LineChart from './LineChart'
import PieChart from './PieChart'
import BarChart from './BarChart'
import ScrollTable from './ScrollTable'
import RaddarChart from './RaddarChart'
export default {
  components: {
    LineChart,
    PieChart,
    BarChart,
    RaddarChart,
    ScrollTable
  },
  props:{
    chart:{
      type:String,
      required:true
    },
    action:{
      type:String,
      required:true
    },
    scrollAction:{
      type:String,
      default(){
        return ''
      }
    },
    height:{
      type:String,
      default(){
        return '300px'
      }
    },
    title:{
      type:String,
      default(){
        return ''
      }
    },
    dataTypeOptions:{
      type:Array,
      default(){
        return []
      }
    },
    column:{
      type:Array,
      default(){
        []
      }
    },
  },
  data() {
    return {
      chartName:'',
      showSetting:false
    }
  },
  created(){
    this.chartName = this.title;
  },
  methods: {
    changeChatData(val){

    }
  }
}
</script>

<style scoped>
.chart-title{color:#909399;display: flex;align-items: center;justify-content: space-between;background: #fff;padding:10px 0 10px 10px;font-size:20px;}
.chart-title-left{display: flex;align-items: center;}
.chart-refresh{margin-left:5px;}
.chart-refresh:hover{color:#409EFF;cursor: pointer;}
</style>
